<template>
	<view class="content">
		<swiper class="swiperBox">
			<swiper-item class="swiperItem">
				<image :src="data.title_img" class="swiperItem"></image>
			</swiper-item>
		</swiper>
		<text class="title">{{data.name}}</text>
		<view class="priceBox">
			<text class="price" v-if="data.price>0">{{data.price}}</text>
			<text class="price" v-else>免费</text>
			<text class="have">已报名{{data.registrations_num}}</text>
		</view>
		<view class="timeBox">
			<image :src="baseUrl+'img/index/time.png'" class="timeIcon"></image>
			<text class="time">时间：{{$timestampToTime(data.start_time)}} - {{$timestampToTime(data.end_time)}}</text>
		</view>
		<view class="addressBox">
			<image :src="baseUrl+'img/index/time.png'" class="addressIcon"></image>
			<text class="address">地点：{{data.address}}</text>
			<text class="arrow">></text>
		</view>
		<view class="infoBox">
			<mp-html :content="data.content" />
		</view>
		<view class="menuBox">
			<view class="left" @click="$switchTab('/pages/index/index')">
				<image :src="baseUrl+'img/index/home.png'" class="home"></image>
				<text class="homeLabel">首页</text>
			</view>
			<view class="submit" v-if="type==1" @click="isSubmit=!isSubmit">
				立即报名
			</view>
		</view>
		<view class="submitContainer" v-if="isSubmit">
			<view class="submitBox">
				<text class="submitTitle">活动报名</text>
				<view class="submitItem">
					<text class="submitLabel">姓 名：</text>
					<input type="text" class="submitInput" placeholder="请输入姓名" v-model="user.name" />
				</view>
				<view class="submitItem" style="border-bottom: 1rpx solid #cccccc">
					<text class="submitLabel">房 号：</text>
					<input type="text" class="submitInput" placeholder="请输入房号" v-model="user.floor_house_num" />
				</view>
				<view class="submitItem">
					<text class="submitLabel">联系方式：</text>
					<input type="text" class="submitInput" placeholder="请输入联系方式" maxlength="11" v-model="user.phone" />
				</view>
				<image :src="baseUrl+'img/index/back.png'" class="back" @click="isSubmit=!isSubmit"></image>
				<view class="submit" @click="submit">
					提交
				</view>
			</view>
			<view class="submitResult" v-if="isResult">
				<template v-if="state">
					<image :src="baseUrl+'img/my/success.png'" class="icon"></image>
					<text class="result">报名成功</text>
					<text class="tips">您已报名成功，请准时参加活动！</text>
					<view class="sure" @click="sure">
						确定
					</view>
					<view class="back" @click="$navto.navto('/pages/my_subscribe/my_subscribe',{status:0})">
						查看详情
					</view>
				</template>
				<template v-else>
					<image :src="baseUrl+'img/my/fail.png'" class="icon"></image>
					<text class="result">报名失败</text>
					<text class="tips">{{tips}}</text>
					<view class="sure" @click="sure">
						返回
					</view>
					<!-- <view class="back" @click="sure">
						返回
					</view> -->
				</template>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				baseUrl: this.$baseUrl,
				state: true,
				data: '',
				id: '',
				type: 1,
				isResult: false,
				isSubmit: false,
				user: {
					name: '',
					phone: '',
					floor_house_num: ''
				},
				tips: '报名失败，别灰心再次报名试试！'
			}
		},

		onShow(options) {
			// 活动详情
			let pagearr = getCurrentPages();
			let currentPage = pagearr[pagearr.length - 1];
			this.id = currentPage.options.id;
			this.type = currentPage.options.type;
			this.$request.get(`activity_read/${this.id}`).then(res => {
				this.data = res.data.data;
			})
		},
		onLoad() {
			// if (this.token) {
			// 	this.getUser();
			// } else {
			// 	this.$store.watch(
			// 		(state) => state.token,
			// 		(newToken) => {
			// 			if (newToken) {
			// 				this.getUser();
			// 			}
			// 		}
			// 	);
			// }
		},
		methods: {
			sure() {
				this.isResult = false;
				this.isSubmit = false;
			},
			submit() {
				if (!this.user.name) {
					return this.$toast('请填写姓名');
				}
				if (!this.user.phone || !(/^1[3|4|5|6|8|7|9][0-9]\d{8}$/.test(this.user.phone))) {
					return this.$toast('联系方式不正确');
				}
				if (!this.user.floor_house_num) {
					return this.$toast('请填写房号');
				}
				this.$request.post('activityRecordSave', {
					name: this.user.name,
					phone: this.user.phone,
					floor_house_num: this.user.floor_house_num,
					activity_id: this.id,
				}).then(res => {
					this.isResult = true;
					if (res.data.code == 10000) { //提交成功判断是否需要支付
						if (res.data.data.pay_status == 1) {
							this.$request.post(`unified_order`, {
								id: res.data.data.id,
								type: 2,
								pay_status:1
							}).then(res => {
								console.log(res);
								if (res.data.code == 10000) {
									wx.requestPayment({
										timeStamp: res.data.data.timeStamp.toString(),
										nonceStr: res.data.data.nonceStr,
										package: res.data.data.package,
										signType: res.data.data.signType,
										paySign: res.data.data.paySign,
										success: (res) => {
											this.state = true;
										},
										fail: (res) => {
											this.$toast('支付失败');
										}
									});
								}else{
									this.$toast(res.data.message);
								}
							})
						} else {
							this.state = true;
						}
					} else {
						this.state = false;
						this.tips = res.data.message;
					}
				})
			},
			getUser() {
				this.$request.get('center').then(res => {
					this.user = res.data.data;
				})
			},
		},
		computed: {
			...mapState(['token']),
		},
	}
</script>
<style lang="scss" scoped>
	.submitContainer {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.6);

		.submitResult {
			position: fixed;
			bottom: 0;
			width: 750rpx;
			padding-top: 195rpx;
			padding-bottom: 300rpx;
			border-radius: 20rpx 20rpx 0rpx 0rpx;
			background-color: #FFFFFF;
			display: flex;
			flex-direction: column;
			align-items: center;

			.backBtn {
				position: absolute;
				top: 40rpx;
				right: 40rpx;
				width: 32rpx;
				height: 22rpx;
			}

			.back {
				width: 250rpx;
				height: 80rpx;
				border-radius: 6rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-weight: 500;
				font-size: 24rpx;
				color: #010101;
				letter-spacing: 5rpx;
				margin-top: 25rpx;
				border: 1rpx solid #010101;
			}

			.sure {
				width: 250rpx;
				height: 80rpx;
				border-radius: 6rpx;
				background: #121212;
				display: flex;
				justify-content: center;
				align-items: center;
				font-weight: 500;
				font-size: 24rpx;
				color: #FFFFFF;
				letter-spacing: 5rpx;
				margin-top: 90rpx;
			}

			.tips {
				font-weight: 500;
				font-size: 24rpx;
				color: #8E8E8E;
				margin-top: 33rpx;
			}

			.result {
				font-weight: 700;
				font-size: 32rpx;
				color: #121212;
				letter-spacing: 6rpx;
				margin-top: 50rpx;
			}

			.icon {
				width: 220rpx;
				height: 220rpx;
			}
		}

		.submitBox {
			position: fixed;
			bottom: 0;
			width: 750rpx;
			padding-top: 60rpx;
			padding-bottom: 110rpx;
			border-radius: 20rpx 20rpx 0rpx 0rpx;
			background-color: #FFFFFF;

			.submit {
				width: 670rpx;
				height: 90rpx;
				border-radius: 6rpx;
				background: #121212;
				display: flex;
				align-items: center;
				justify-content: center;
				font-weight: 700;
				font-size: 28rpx;
				color: #FFFFFF;
				letter-spacing: 5rpx;
				margin-left: 40rpx;
				margin-top: 125rpx;
			}

			.back {
				position: absolute;
				top: 40rpx;
				right: 40rpx;
				width: 32rpx;
				height: 22rpx;
			}

			.submitItem {
				width: 670rpx;
				margin-left: 40rpx;
				padding-top: 45rpx;
				padding-bottom: 45rpx;
				border-top: 1rpx solid #cccccc;
				display: flex;
				justify-content: space-between;

				.submitInput {
					font-size: 26rpx;
					color: #121212;
					letter-spacing: 5rpx;
					text-align: right;
				}

				.submitLabel {
					font-weight: 700;
					font-size: 26rpx;
					color: #121212;
					letter-spacing: 5rpx;
				}

			}




			.submitTitle {
				font-weight: 700;
				width: 100%;
				font-size: 32rpx;
				text-align: center;
				color: #121212;
				letter-spacing: 5rpx;
				display: block;
				margin-bottom: 60rpx;
			}
		}
	}

	.menuBox {
		width: 670rpx;
		height: 120rpx;
		display: flex;
		position: fixed;
		bottom: 0rpx;
		margin-left: 40rpx;
		justify-content: space-between;
		margin-top: 40rpx;
		padding-top: 10rpx;
		// border-top: 1rpx solid #cccccc;
		background-color: #FFFFFF;

		.submit {
			width: 560rpx;
			height: 80rpx;
			border-radius: 40rpx;
			background: #121212;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: 700;
			font-size: 28rpx;
			color: #FFFFFF;
			letter-spacing: 5rpx;
		}

		.left {
			display: flex;
			flex-direction: column;
			align-items: center;

			.homeLabel {
				font-weight: 500;
				font-size: 18rpx;
				color: #121212;
			}

			.home {
				width: 48rpx;
				height: 48rpx;
			}
		}
	}

	.infoBox {
		width: 670rpx;
		margin-left: 40rpx;
		margin-top: 75rpx;
		margin-bottom: 100rpx;
		padding-bottom: 150rpx;
	}

	.addressBox {
		position: relative;
		display: flex;
		align-items: center;
		margin-left: 40rpx;
		margin-top: 30rpx;
		width: 670rpx;

		.arrow {
			position: absolute;
			font-size: 24rpx;
			right: 0;
			top: 50%;
			transform: translateY(-50%);
		}

		.addressIcon {
			width: 32rpx;
			height: 32rpx;
		}

		.address {
			font-weight: 500;
			color: #121212;
			margin-left: 25rpx;
			font-size: 24rpx;
		}
	}

	.timeBox {
		display: flex;
		align-items: center;
		margin-left: 40rpx;
		margin-top: 50rpx;

		.timeIcon {
			width: 32rpx;
			height: 32rpx;
		}

		.time {
			font-weight: 500;
			color: #121212;
			margin-left: 25rpx;
			font-size: 24rpx;
		}
	}

	.priceBox {
		display: flex;
		width: 670rpx;
		margin-left: 40rpx;
		margin-top: 60rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-bottom: 55rpx;
		border-bottom: 1rpx solid #8E8E8E;

		.have {
			font-weight: 500;
			font-size: 22rpx;
			color: #cccccc;
		}

		.price {
			font-weight: 700;
			font-size: 30rpx;
			color: #121212;
		}
	}

	.title {
		font-weight: 700;
		width: 670rpx;
		margin-left: 40rpx;
		font-size: 40rpx;
		color: #121212;
		margin-top: 50rpx;
		display: block;
	}

	.swiperBox {
		width: 750rpx;
		height: 700rpx;

		.swiperItem {
			width: 100%;
			height: 100%;
		}
	}

	.content {
		width: 100%;
		height: 100vh;
	}
</style>